layui.use('element', function(){
    var $ = layui.jquery
        ,layer = layui.layer
        ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

    var isShow = true;
    $(function () {
        //显示与隐藏菜单
        $("#isshow").click(function () {
            if (isShow) {
                $("#mainmenu").animate({
                    left: "-200px"
                }, 500);
                $(".layui-body").animate({
                    left: "0px"
                }, 500)
                $(".layui-footer").animate({
                    left: "0px"
                }, 500)
                setTimeout(function () {
                    $("#isshow").removeClass("layui-icon-shrink-right");
                    $("#isshow").addClass("layui-icon-spread-left")
                }, 500);
            } else {

                $("#mainmenu").animate({
                    left: "0px"
                }, 500);
                $(".layui-body").animate({
                    left: "200px"
                }, 500)
                $(".layui-footer").animate({
                    left: "200px"
                }, 500)
                setTimeout(function () {
                    $("#isshow").removeClass("layui-icon-spread-left");
                    $("#isshow").addClass("layui-icon-shrink-right")
                }, 500);
            }

            isShow = !isShow;
        })

        $(".layui-nav-child a").click(function () {
            var dataid = $(this);
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else {
                var isData = false;
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                }
            }
            active.tabChange(dataid.attr("data-id"));
        })
    })

    //tab触发事件
    var active = {
        tabAdd: function (url, id, title) {
            //新增一个Tab项
            element.tabAdd('tab', {
                title: title //用于演示
                ,
                content: '<iframe data-frameid="' + id + '" frameborder="0" name="content" width="100%" src="' + url +
                '"></iframe>',
                id: id //实际使用一般是规定好的id，这里以时间戳模拟下
            })
            CustomRightClick(); //绑定右键菜单
            FrameWH(); //计算框架高度
        },
        tabChange: function (id) {
            //切换到指定Tab项
            element.tabChange('tab', id); //切换到：用户管理
            $("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src")) //切换后刷新框架
        },
        tabDelete: function (id) {
            element.tabDelete("tab", id); //删除
        },
        tabDeleteAll: function (ids) { //删除所有
            $.each(ids, function (i, item) {
                element.tabDelete("tab", item);
            })
        }
    };

    //绑定右键菜单
    function CustomRightClick() {
        //取消右键
        $('.layui-tab-title li').on('contextmenu', function () {
            return false;
        })
        $('.layui-tab-title,.layui-tab-title li').click(function () {
            $('.rightmenu').hide();
        });
        //桌面点击右击
        $('.layui-tab-title li').on('contextmenu', function (e) {
            var popupmenu = $(".rightmenu");
            popupmenu.find("li").attr("data-id", $(this).attr("lay-id"));
            l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
            t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
            popupmenu.css({
                left: l,
                top: t
            }).show();
            //alert("右键菜单")
            return false;
        });
    }

    //右键菜单关闭功能
    $(".rightmenu li").click(function () {
        var currid = $(this).attr("data-id");
        if ($(this).attr("data-type") == "closethis") {
            active.tabDelete(currid)
        } else if ($(this).attr("data-type") == "closeall") {
            var tabtitle = $(".layui-tab-title li");
            var ids = new Array();
            $.each(tabtitle, function (i) {
                ids[i] = $(this).attr("lay-id");
            })

            active.tabDeleteAll(ids);
        } else if ($(this).attr("data-type") == "closeother") {
            var tabtitle = $(".layui-tab-title li");
            var ids = new Array();
            $.each(tabtitle, function (i) {
                if ($(this).attr("lay-id") != currid) {
                    ids[i] = $(this).attr("lay-id");
                }
            })

            active.tabDeleteAll(ids);
        }

        $('.rightmenu').hide();
    });

    function FrameWH() {
        var h =  $(window).height() - 41 - 10 - 35 - 10 - 44 - 10;
        $("iframe").css("height",  h);
    }

    $(window).resize(function () {
        FrameWH();
    });

});

